<template>
<div class="bh-switch" 
    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
    @click="switchValue">
	<input type="checkbox" name="" ref='input' class="bh-switch__input">
	<span :class="['bh-switch__label', 'bh-switch__label--left', !checked ? 'is-active' : '']">
		<span>{{inactiveText}}</span>
	</span>
	<span class="bh-switch__core"  :style="{ 'background-color': selectColor, 'background-color': selectColor }"></span>
	<span :class="['bh-switch__label', 'bh-switch__label--right', checked ? 'is-active' : '']">
		<span>{{activeText}}</span>
	</span>
</div>
</template>

<script>
export default {
	name: 'bh-switch',
	props: {
		value: {
			type: [Boolean, String, Number],
			default: false
		},
		activeValue: {
			type: [Boolean, String, Number],
			default: true
		},
		inactiveValue: {
			type: [Boolean, String, Number],
			default: false
		},
		activeText: String,
		inactiveText: String,
		activeColor: {
			type: String,
			default: ''
		},
		inactiveColor: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
	},
	computed: {
		checked() {
			return this.value === this.activeValue;
		},
		switchDisabled() {
			return this.disabled;
		},
		selectColor() {
			if(this.checked) {
				return this.activeColor;
			}
			return this.inactiveColor;
		},
    },
	methods: {
		switchValue() {
			!this.switchDisabled && this.handleChange();
		},
		handleChange() {
			const val = this.checked ? this.inactiveValue : this.activeValue;
			console.log(val);
			this.$emit('input', val);
			this.$emit('change', val);
			this.$nextTick(() => {
				this.$refs.input.checked = this.checked;
			});
		},
	},
}
</script>
